<template>
    <!-- **
            1.定义过滤器：实现从后往前每三个数字有一个 , 结构中配合管道符 ‘|’ 使用，如：12457 | num ==> 12,457（vue2官网-起步-过滤器）。当想用计算属性，但是又不是很合适的时候，考虑用这个。
        ** -->
    <div>
        <div class="top">
            <ul>
                <li>
                    <div class="total">
                        <span>总销售额：</span>
                        <p>{{ topObj.toalsellmoney }} 元</p>
                    </div>
                    <span class="day">今日销售额：{{ topObj.todaysellmoney }} 元</span>
                </li>
                <li style="background-color: #1e78bf;">
                    <div class="total">
                        <span>总访问量：</span>
                        <p>{{ topObj.toalaccess }} 个</p>
                    </div>
                    <span class="day">今日访问量：{{ topObj.todayaccess }} 个</span>
                </li>
                <li style="background-color: #BA55D3;">
                    <div class="total">
                        <span>总收藏量：</span>
                        <p>{{ topObj.toalcllect }} 个</p>
                    </div>
                    <span class="day">今日收藏量：{{ topObj.todaycllect }} 个</span>
                </li>
                <li style="background-color: #4ab1f1">
                    <div class="total">
                        <span>总支付量：</span>
                        <p>{{ topObj.toalpay }} 个</p>
                    </div>
                    <span class="day">今日支付量：{{ topObj.todaypay }} 元</span>
                </li>
            </ul>
        </div>
        <div class="midlle">
            <div class="mid-lt mid-com">
                <span>月销售额</span>
                <div id="mthsell" style="width: 753px; height: 308px;">图形区域</div>
            </div>
            <div class="mid-rt mid-com">
                <span>产品销售比例</span>
                <div id="prosell" style="width: 448px; height: 308px;">图形区域</div>
            </div>
        </div>
        <div class="foot">
            <ul>
                <li class="out-li">
                    <span class="out-span">今日订单</span>
                    <ul>
                        <li>
                            <span>今日订单数</span>
                            <p>{{ footObj.todayorder }}</p>
                        </li>
                        <li>
                            <span>汇总确认订单</span>
                            <p>{{ footObj.toalsureorder }}</p>
                        </li>
                        <li>
                            <span>累计金额</span>
                            <p>{{ footObj.toalmoney }}</p>
                        </li>
                    </ul>
                </li>
                <li class="out-li">
                    <span class="out-span">本月订单</span>
                    <ul>
                        <li>
                            <span>本月订单数</span>
                            <p>{{ footObj.monthorder }}</p>
                        </li>
                        <li>
                            <span>汇总确认订单</span>
                            <p>{{ footObj.monthtoalorder }}</p>
                        </li>
                        <li>
                            <span>累计金额</span>
                            <p>{{ footObj.monthtoalmoney }}</p>
                        </li>
                    </ul>
                </li>
                <li class="out-li">
                    <span class="out-span">快捷入口</span>
                    <ul>
                        <li class="kjrk active">
                            <span>产品管理</span>
                        </li>
                        <li class="kjrk">
                            <span>消息管理</span>
                        </li>
                        <li class="kjrk">
                            <span>内容管理</span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { songFun } from '@/utils';
import { getHomeTopNumb, getHomefootNumb, getHomemidle } from "@/api/request/home/index";

let topObj = ref({}); // 顶部数据数额总对象
let footObj = ref({}); // 顶部数据数额总对象

const getTopNumb = async () => {
    const res = await getHomeTopNumb('/hometop')
    if (res.code != 200) {
        ElMessage({
            type: 'error',
            message: '获取数据失败！'
        })
    }
    topObj.value = res.datas
    songFun.munHandle(topObj.value)   //不能和V2一样定义过滤器直接在结构中改变格式，所以定义方法在获取数据以后先改变格式再渲染到结构中
}
const getFootNumb = async () => {
    const res = await getHomefootNumb('/homefoot')
    if (res.code != 200) {
        ElMessage({
            type: 'error',
            message: '获取数据失败！'
        })
    }
    footObj.value = res.datas
    songFun.munHandle(footObj.value)  //不能和V2一样定义过滤器直接在结构中改变格式，所以定义方法在获取数据以后先改变格式再渲染到结构中
}
const getMidleData = async () => {
    const res = await getHomemidle('/homemidel')
    if (res.code != 200) {
        ElMessage({
            type: 'error',
            message: '获取数据失败！'
        })
    }
    let mothEchartData = ref([])
    let mothObj = ref(res.datas.moth[0])
    for (let key in mothObj.value) {           // 把拿到的数据，放的 mothEchartData 中
        mothEchartData.value.push(mothObj.value[key])
        monthSellEchart(mothEchartData.value)  // 创建柱型、折线型图表并动态传值
    }
    productSellEchart(res.datas.prot)  // 创建饼图图表并动态传值
}
onMounted(() => {
    getTopNumb()
    getFootNumb()
    getMidleData()
})

// 创建柱型、折线型图
const monthSellEchart = (valdata) => {
    let myChart = echarts.init(document.getElementById('mthsell'));
    myChart.setOption({
        legend: {
            data: ['销售量', '销售额']
        },
        xAxis: { // x 轴数据
            data: ['肉类', '水产', '蔬菜', '冷饮食品', '水果'],
        },
        yAxis: {  // y轴数据自动创建

        },
        series: [  // 图表内容，与 x 轴内容一一对应
            {
                name: '销售量',
                type: 'bar',   // bar 柱状图 ， line 折线图 ， pie 饼图 ， map 地图
                data: valdata
            },
            {
                name: '销售额',
                type: 'line',   // bar 柱状图 ， line 折线图 ， pie 饼图 ， map 地图
                data: valdata,
                smooth: true,
                lineStyle: {
                    color: '#00BFFF'
                },
                itemStyle: {
                    color: '#00BFFF'
                }
            }
        ]
    })
}
// 创建饼图图表
const productSellEchart = (valArr) => {
    let myChart2 = echarts.init(document.getElementById('prosell'));
    myChart2.setOption({
        tooltip: {
            formatter: '{a}<br/>{b}：{d}%'    // 换行 要用 <br/>
        },
        legend: {
            data: ['肉类', '水产', '蔬菜', '冷饮食品', '水果'],
            orient: 'vertical',
            left: 'left'
        },
        series: [  // 图表内容，与 x 轴内容一一对应
            {
                name: '销量比列',
                type: 'pie',
                radius: '50%',
                data: valArr,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    });
}
</script>

<style scoped lang="less">
.top {
    ul {
        width: 100%;
        display: flex;
        margin-bottom: 20px;

        li {
            width: 25%;
            height: 127px;
            border-radius: 5px;
            background-color: #CD853F;
            color: #fff;
            margin-right: 2%;

            .total {
                height: 68px;
                padding: 5px 10px;
                border-bottom: 1px solid #fff;

                p {
                    margin: 15px 0 0 80px;
                    font-size: 20px;
                    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                }
            }

            .day {
                padding: 15px;
            }
        }
    }
}

.midlle {
    width: 100%;
    display: flex;
    margin-bottom: 20px;

    span {
        margin-bottom: 8px;
    }

    .mid-lt {
        width: 60%;
        margin-right: 2%;
    }

    .mid-rt {
        flex: 1;
    }

    .mid-com {
        height: 350px;
        border-radius: 5px;
        padding: 5px 10px;
        background-color: #fff;
    }
}

.foot {
    ul {
        width: 100%;
        display: flex;

        .out-li {
            width: 29%;
            height: 127px;
            border-radius: 5px;
            color: #000;
            margin-right: 5%;
            background-color: #fff;
            box-shadow: 0 0 10px #999;

            &:last-child {
                margin-right: 0;
            }

            .out-span {
                font-weight: 500;
                padding: 10px 15px;
            }

            ul {
                width: 100%;
                padding: 10px 15px;
                box-sizing: border-box;
                border-top: 1px solid #eea;

                li {
                    width: 34%;
                    font-size: 12px;
                    text-align: center;
                    padding: 5px 0;
                    border-right: 1px solid #eee;

                    &:last-child {
                        border: 0;
                    }

                    span {
                        margin-bottom: 10px;
                    }
                }

                .kjrk {
                    width: 30%;
                    margin-right: 4%;
                    height: 33.8px;
                    line-height: 33.8px;
                    cursor: pointer;
                    border-radius: 5px;
                    border: 1px solid #bbb !important;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .active {
                    background-color: #4169E1;
                    color: #fff;
                }
            }
        }
    }
}
</style>